<template>
  <view
    v-if="orderState === OrderStateEnum.CLOSED"
    class="py-20 px-16 disFlxJS"
    :style="{ backgroundColor: '#F2F3F5' }"
  >
    <view style="color: #292928">
      <view class="mb-8">
        <text class="fz-32">已取消</text>
      </view>
      <view class="fz-14">
        <text>{{ remark }}</text>
      </view>
    </view>
    <view></view>
  </view>
  <view
    v-else-if="payState !== OrderPayStateEnum.HAVEPAID"
    class="py-20 px-16 disFlxJS"
    :style="{ backgroundColor: '#FFF4E7' }"
  >
    <view style="color: #292928">
      <view class="mb-8">
        <text class="fz-32">待付款</text>
      </view>
      <view class="fz-14">
        <text>请在</text>
        <text class="mx-4" style="color: #f43e06">{{ remainingTime }}</text>
        <text>内完成支付</text>
      </view>
    </view>
    <view class="disFlxCC">
      <TButton
        text="立即支付"
        type="none"
        :customStyle="{
          display: 'inline-block',
          backgroundColor: '#EA5E0E',
          color: '#FFFFFF',
          marginLeft: '20rpx',
        }"
        custom-class="h-32 linh-32 br-16 px-12"
        @click="emits('toPay')"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { OrderPayStateEnum, OrderStateEnum } from '@/enums/orderEnum';
  import { propTypes } from '@/utils/propTypes';
  import type { FunctionArgs } from '@vueuse/core';
  import { ref, type PropType, onUnmounted, watch } from 'vue';
  import { countdown_timer } from '../../utils/payment';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const props = defineProps({
    orderState: Number as PropType<OrderStateEnum>,
    payState: Number as PropType<OrderPayStateEnum>,
    expireSecond: propTypes.number,
    remark: propTypes.string
  });

  const emits = defineEmits(['toPay', 'refresh']);

  let countdownStop: FunctionArgs;
  const remainingTime = ref<string>('');
  const expireSecond = props.expireSecond;

  if (props.payState !== OrderPayStateEnum.HAVEPAID && expireSecond && !remainingTime.value) {
    countdownStop = countdown_timer(expireSecond, remainingTime, void 0, () => emits('refresh'));
  }

  onUnmounted(() => countdownStop?.());
</script>

<style scoped></style>
